<template>
  <div class="series-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <h1 class="page-title">剧集</h1>
      <div class="search-bar">
        <el-input placeholder="搜索剧集" prefix-icon="Search" v-model="searchTitle" class="search-input" />
        <el-button type="primary" class="search-btn" @click="queryFilePage(searchTitle)">搜索</el-button>
      </div>
    </div>

    <!-- 分类标签 -->
    <div class="category-tabs">
      <div class="tab-item active">全部</div>
      <div class="tab-item">电视剧</div>
      <div class="tab-item">电影</div>
      <div class="tab-item">综艺</div>
      <div class="tab-item">动漫</div>
      <div class="tab-item">纪录片</div>
    </div>

    <!-- 视频栅格列表 -->
    <FilmItemList :films="videos" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getFilmList } from '@/api/films-api'
import type { Film } from '@/types/types'

const videos = ref<Film[]>([])
const loading = ref(true)
const searchTitle = ref('')

const queryFilePage = (title: string) => {
  if (!title) {
    return
  }
  console.log(title);
  videos.value = videos.value.filter((video) => video.title.includes(title))
}

onMounted(async () => {
  try {
    const result = await getFilmList()
    // 转换电影数据为剧集格式
    videos.value = result.data.map((film: Film) => ({
      ...film,
      coverUrl: film.url?.replace('mp4', 'jpg') || 'https://picsum.photos/320/480', // 使用随机图片作为备用
      duration: Math.floor(Math.random() * 3600), // 随机时长
      latestEpisode: Math.floor(Math.random() * 50) + 1, // 随机集数
      updateStatus: Math.random() > 0.5, // 随机更新状态
      views: Math.floor(Math.random() * 1000000), // 随机观看次数
    }))
  } catch (error) {
    console.error('获取剧集列表失败:', error)
    // 加载本地示例数据
    videos.value = [
      { id: '1', title: '热门剧集标题示例', coverUrl: 'https://picsum.photos/320/480?random=1', duration: 3600, latestEpisode: 12, updateStatus: true, views: 125000 },
      { id: '2', title: '这是一个非常长的剧集标题用来测试文本截断效果', coverUrl: 'https://picsum.photos/320/480?random=2', duration: 2400, latestEpisode: 8, updateStatus: false, views: 89000 },
      { id: '3', title: '热门综艺精选', coverUrl: 'https://picsum.photos/320/480?random=3', duration: 1800, latestEpisode: 5, updateStatus: true, views: 320000 },
      { id: '4', title: '经典动漫回顾', coverUrl: 'https://picsum.photos/320/480?random=4', duration: 3000, latestEpisode: 24, updateStatus: false, views: 560000 },
      { id: '5', title: '最新纪录片', coverUrl: 'https://picsum.photos/320/480?random=5', duration: 4200, latestEpisode: 3, updateStatus: true, views: 98000 },
      { id: '6', title: '独家原创剧集', coverUrl: 'https://picsum.photos/320/480?random=6', duration: 2700, latestEpisode: 15, updateStatus: true, views: 180000 },
      { id: '7', title: '高分悬疑剧集', coverUrl: 'https://picsum.photos/320/480?random=7', duration: 3300, latestEpisode: 10, updateStatus: true, views: 240000 },
      { id: '8', title: '爱情故事精选', coverUrl: 'https://picsum.photos/320/480?random=8', duration: 2100, latestEpisode: 16, updateStatus: false, views: 156000 },
      { id: '9', title: '最新综艺精选', coverUrl: 'https://picsum.photos/320/480?random=9', duration: 2400, latestEpisode: 12, updateStatus: true, views: 210000 },
      { id: '10', title: '最新动漫精选', coverUrl: 'https://picsum.photos/320/480?random=10', duration: 2700, latestEpisode: 18, updateStatus: false, views: 300000 },
      { id: '11', title: '最新纪录片', coverUrl: 'https://picsum.photos/320/480?random=11', duration: 4500, latestEpisode: 4, updateStatus: true, views: 120000 },
      { id: '12', title: '最新电视剧', coverUrl: 'https://picsum.photos/320/480?random=12', duration: 3000, latestEpisode: 10, updateStatus: false, views: 250000 },
    ]
  } finally {
    loading.value = false
  }
})
</script>

<style scoped lang="scss">
// 基础样式变量 - 仅保留Web端所需
@use '../assets/_variables.scss' as variables;

.series-container {
  background-color: #fafafa;
  min-height: 100vh;
  padding: 0 10px;
  margin: 0 50px;
}

// 顶部导航
.top-nav {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 16px;
  background-color: variables.$white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: variables.$container-max-width;
  margin: 0 auto;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: variables.$gray-dark;
  margin-right: 24px;
}

.search-bar {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  max-width: 650px;
}

.search-input {
  --el-input-bg-color: variables.$gray-light;
  --el-input-border-radius: 20px;
  --el-input-height: 36px;
  width: 100%;
}

.search-btn {
  margin-left: 12px;
  height: 36px;
  background-color: variables.$primary-color;
  border: #fff;
}

// 分类标签
.category-tabs {
  display: flex;
  position: sticky;
  top: 70px;
  padding: 12px 0 12px 12px;
  background-color: variables.$white;
  overflow-x: auto; // 水平滚动
  white-space: nowrap;
  scrollbar-width: none; // 隐藏滚动条

  &::-webkit-scrollbar {
    display: none;
  }

  max-width: variables.$container-max-width;
  z-index: 10;
  margin: 0 auto;
}

.tab-item {
  padding: 6px 16px;
  margin-right: 10px;
  border-radius: 20px;
  font-size: 14px;
  color: variables.$gray-dark;
  cursor: pointer;
  transition: variables.$transition;

  &:last-child {
    margin-right: 0;
  }

  &:hover:not(.active) {
    background-color: variables.$gray-light;
  }

  &.active {
    background-color: variables.$primary-color;
    color: variables.$white;
    font-weight: 500;
  }
}
</style>